{% extends "base.html" %}

{% block title %}账号管理 - {{ app_name }}{% endblock %}

{% block page_title %}账号管理{% endblock %}

{% block page_subtitle %}管理系统用户账户和权限{% endblock %}

{% block content %}
  
    <!-- 操作栏 -->
    <div class="bg-white rounded-xl shadow-sm border border-slate-200 p-6 mb-6">
        <div class="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4">
            <!-- 搜索和过滤 -->
            <div class="flex flex-col sm:flex-row gap-4 flex-1">
                <!-- 搜索框 -->
                <div class="relative flex-1 max-w-md">
                    <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                        <i class="fas fa-search text-slate-400"></i>
                    </div>
                    <input type="text" id="searchInput" placeholder="搜索用户名、邮箱或姓名..." 
                           class="w-full pl-10 pr-4 py-2.5 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition-all">
                </div>

                <!-- 角色过滤 -->
                <select id="roleFilter" class="px-4 py-2.5 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition-all">
                    <option value="">所有角色</option>
                    <option value="admin">管理员</option>
                    <option value="user">普通用户</option>
                </select>

                <!-- 状态过滤 -->
                <select id="statusFilter" class="px-4 py-2.5 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition-all">
                    <option value="">所有状态</option>
                    <option value="true">活跃</option>
                    <option value="false">禁用</option>
                </select>
            </div>

            <!-- 操作按钮 -->
            <div class="flex gap-3">
                <button onclick="loadUsers()" class="px-4 py-2.5 border border-slate-300 rounded-lg hover:bg-slate-50 transition-colors">
                    <i class="fas fa-sync-alt mr-2"></i>刷新
                </button>
                <button onclick="showAddUserModal()" class="bg-gradient-to-r from-indigo-500 to-purple-600 text-white px-6 py-2.5 rounded-lg hover:shadow-lg transition-all duration-300">
                    <i class="fas fa-plus mr-2"></i>添加用户
                </button>
            </div>
        </div>
    </div>

    <!-- 用户列表 -->
    <div class="bg-white rounded-xl shadow-sm border border-slate-200">
        <div class="overflow-x-auto">
            <table class="min-w-full divide-y divide-slate-200">
                <thead class="bg-slate-50">
                    <tr>
                        <th class="px-6 py-3 text-left text-xs font-medium text-slate-500 uppercase tracking-wider">用户</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-slate-500 uppercase tracking-wider">邮箱</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-slate-500 uppercase tracking-wider">角色</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-slate-500 uppercase tracking-wider">状态</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-slate-500 uppercase tracking-wider">创建时间</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-slate-500 uppercase tracking-wider">最后登录</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-slate-500 uppercase tracking-wider">操作</th>
                    </tr>
                </thead>
                <tbody id="userTableBody" class="bg-white divide-y divide-slate-200">
                    <!-- 用户数据将通过JavaScript动态加载 -->
                    <tr>
                        <td colspan="7" class="px-6 py-8 text-center text-slate-500">
                            <i class="fas fa-spinner fa-spin text-2xl mb-2"></i>
                            <p>正在加载用户数据...</p>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>

        <!-- 分页 -->
        <div id="pagination" class="px-6 py-4 border-t border-slate-200 flex items-center justify-between">
            <!-- 分页将通过JavaScript动态生成 -->
        </div>
    </div>

    <!-- 添加用户模态框 -->
    <div id="addUserModal" class="fixed inset-0 bg-slate-900 bg-opacity-50 hidden z-50 flex items-center justify-center p-4">
        <div class="bg-white rounded-xl shadow-2xl max-w-md w-full transform transition-all">
            <div class="p-6">
                <div class="flex items-center justify-between mb-4">
                    <h3 class="text-lg font-semibold text-slate-800">添加用户</h3>
                    <button onclick="hideAddUserModal()" class="p-2 rounded-lg hover:bg-slate-100 transition-colors">
                        <i class="fas fa-times text-slate-600"></i>
                    </button>
                </div>
                <form id="addUserForm" class="space-y-4">
                    <div>
                        <label class="block text-sm font-medium text-slate-700 mb-1">用户名 <span class="text-red-500">*</span></label>
                        <input type="text" name="username" required 
                               class="w-full px-4 py-2.5 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition-all"
                               pattern="^[a-zA-Z0-9_]+$" title="用户名只能包含英文字母、数字和下划线">
                        <p class="mt-1 text-sm text-slate-500">仅支持英文字母、数字和下划线</p>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-slate-700 mb-1">邮箱 <span class="text-red-500">*</span></label>
                        <input type="email" name="email" required 
                               class="w-full px-4 py-2.5 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition-all">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-slate-700 mb-1">密码 <span class="text-red-500">*</span></label>
                        <input type="password" name="password" required 
                               class="w-full px-4 py-2.5 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition-all">
                        <div id="passwordStrength" class="mt-2 text-sm"></div>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-slate-700 mb-1">确认密码 <span class="text-red-500">*</span></label>
                        <input type="password" name="confirmPassword" required 
                               class="w-full px-4 py-2.5 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition-all">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-slate-700 mb-1">全名</label>
                        <input type="text" name="full_name" 
                               class="w-full px-4 py-2.5 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition-all">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-slate-700 mb-1">电话</label>
                        <input type="tel" name="phone" 
                               class="w-full px-4 py-2.5 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition-all">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-slate-700 mb-1">角色 <span class="text-red-500">*</span></label>
                        <select name="role_ids" required class="w-full px-4 py-2.5 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition-all">
                            <option value="2">普通用户</option>
                            <option value="1">管理员</option>
                        </select>
                    </div>
                    <div class="flex justify-end space-x-3 mt-6">
                        <button type="button" onclick="hideAddUserModal()" class="px-4 py-2 border border-slate-300 rounded-lg hover:bg-slate-50 transition-colors">
                            取消
                        </button>
                        <button type="submit" class="bg-gradient-to-r from-indigo-500 to-purple-600 text-white px-4 py-2 rounded-lg hover:shadow-lg transition-all duration-300">
                            创建
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- 编辑用户模态框 -->
    <div id="editUserModal" class="fixed inset-0 bg-slate-900 bg-opacity-50 hidden z-50 flex items-center justify-center p-4">
        <div class="bg-white rounded-xl shadow-2xl max-w-md w-full transform transition-all">
            <div class="p-6">
                <div class="flex items-center justify-between mb-4">
                    <h3 class="text-lg font-semibold text-slate-800">编辑用户</h3>
                    <button onclick="hideEditUserModal()" class="p-2 rounded-lg hover:bg-slate-100 transition-colors">
                        <i class="fas fa-times text-slate-600"></i>
                    </button>
                </div>
                <form id="editUserForm" class="space-y-4">
                    <input type="hidden" name="user_id">
                    <div>
                        <label class="block text-sm font-medium text-slate-700 mb-1">用户名</label>
                        <input type="text" name="username" readonly 
                               class="w-full px-4 py-2.5 border border-slate-300 rounded-lg bg-slate-50 cursor-not-allowed">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-slate-700 mb-1">邮箱 <span class="text-red-500">*</span></label>
                        <input type="email" name="email" required 
                               class="w-full px-4 py-2.5 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition-all">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-slate-700 mb-1">全名</label>
                        <input type="text" name="full_name" 
                               class="w-full px-4 py-2.5 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition-all">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-slate-700 mb-1">电话</label>
                        <input type="tel" name="phone" 
                               class="w-full px-4 py-2.5 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition-all">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-slate-700 mb-1">角色 <span class="text-red-500">*</span></label>
                        <select name="role_ids" required class="w-full px-4 py-2.5 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition-all">
                            <option value="2">普通用户</option>
                            <option value="1">管理员</option>
                        </select>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-slate-700 mb-1">状态</label>
                        <select name="is_active" class="w-full px-4 py-2.5 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition-all">
                            <option value="true">活跃</option>
                            <option value="false">禁用</option>
                        </select>
                    </div>
                    <div class="flex justify-end space-x-3 mt-6">
                        <button type="button" onclick="hideEditUserModal()" class="px-4 py-2 border border-slate-300 rounded-lg hover:bg-slate-50 transition-colors">
                            取消
                        </button>
                        <button type="submit" class="bg-gradient-to-r from-indigo-500 to-purple-600 text-white px-4 py-2 rounded-lg hover:shadow-lg transition-all duration-300">
                            保存
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- 重置密码模态框 -->
    <div id="resetPasswordModal" class="fixed inset-0 bg-slate-900 bg-opacity-50 hidden z-50 flex items-center justify-center p-4">
        <div class="bg-white rounded-xl shadow-2xl max-w-md w-full transform transition-all">
            <div class="p-6">
                <div class="flex items-center justify-between mb-4">
                    <h3 class="text-lg font-semibold text-slate-800">重置密码</h3>
                    <button onclick="hideResetPasswordModal()" class="p-2 rounded-lg hover:bg-slate-100 transition-colors">
                        <i class="fas fa-times text-slate-600"></i>
                    </button>
                </div>
                <div class="mb-4">
                    <p class="text-slate-600">确定要重置用户 <span id="resetUsername" class="font-semibold text-slate-800"></span> 的密码吗？</p>
                    <p class="text-sm text-orange-600 mt-2">
                        <i class="fas fa-exclamation-triangle mr-1"></i>
                        重置后将生成新的强密码，请立即通知用户
                    </p>
                </div>
                <div class="flex justify-end space-x-3">
                    <button onclick="hideResetPasswordModal()" class="px-4 py-2 border border-slate-300 rounded-lg hover:bg-slate-50 transition-colors">
                        取消
                    </button>
                    <button onclick="confirmResetPassword()" class="bg-gradient-to-r from-orange-500 to-red-600 text-white px-4 py-2 rounded-lg hover:shadow-lg transition-all duration-300">
                        确认重置
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- 修改密码模态框 -->
    <div id="changePasswordModal" class="fixed inset-0 bg-slate-900 bg-opacity-50 hidden z-50 flex items-center justify-center p-4">
        <div class="bg-white rounded-xl shadow-2xl max-w-md w-full transform transition-all">
            <div class="p-6">
                <div class="flex items-center justify-between mb-4">
                    <h3 class="text-lg font-semibold text-slate-800">修改密码</h3>
                    <button onclick="hideChangePasswordModal()" class="p-2 rounded-lg hover:bg-slate-100 transition-colors">
                        <i class="fas fa-times text-slate-600"></i>
                    </button>
                </div>
                <form id="changePasswordForm" class="space-y-4">
                    <input type="hidden" name="user_id">
                    <div>
                        <label class="block text-sm font-medium text-slate-700 mb-1">当前密码 <span class="text-red-500">*</span></label>
                        <input type="password" name="current_password" required 
                               class="w-full px-4 py-2.5 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition-all">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-slate-700 mb-1">新密码 <span class="text-red-500">*</span></label>
                        <input type="password" name="new_password" required 
                               class="w-full px-4 py-2.5 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition-all">
                        <div id="newPasswordStrength" class="mt-2 text-sm"></div>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-slate-700 mb-1">确认新密码 <span class="text-red-500">*</span></label>
                        <input type="password" name="confirm_new_password" required 
                               class="w-full px-4 py-2.5 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition-all">
                    </div>
                    <div class="flex justify-end space-x-3 mt-6">
                        <button type="button" onclick="hideChangePasswordModal()" class="px-4 py-2 border border-slate-300 rounded-lg hover:bg-slate-50 transition-colors">
                            取消
                        </button>
                        <button type="submit" class="bg-gradient-to-r from-indigo-500 to-purple-600 text-white px-4 py-2 rounded-lg hover:shadow-lg transition-all duration-300">
                            修改密码
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- 新密码显示模态框 -->
    <div id="newPasswordModal" class="fixed inset-0 bg-slate-900 bg-opacity-50 hidden z-50 flex items-center justify-center p-4">
        <div class="bg-white rounded-xl shadow-2xl max-w-md w-full transform transition-all">
            <div class="p-6">
                <div class="flex items-center justify-between mb-4">
                    <h3 class="text-lg font-semibold text-slate-800">密码重置成功</h3>
                    <button onclick="hideNewPasswordModal()" class="p-2 rounded-lg hover:bg-slate-100 transition-colors">
                        <i class="fas fa-times text-slate-600"></i>
                    </button>
                </div>
                <div class="mb-6">
                    <p class="text-slate-600 mb-4">用户 <span id="newPasswordUsername" class="font-semibold text-slate-800"></span> 的新密码已生成：</p>
                    <div class="bg-slate-50 border border-slate-200 rounded-lg p-4">
                        <div class="flex items-center justify-between">
                            <span id="newPasswordValue" class="font-mono text-lg font-semibold text-slate-800"></span>
                            <button onclick="copyPassword()" class="px-3 py-1 bg-indigo-600 text-white text-sm rounded-lg hover:bg-indigo-700 transition-colors">
                                <i class="fas fa-copy mr-1"></i>复制
                            </button>
                        </div>
                    </div>
                    <p class="text-sm text-orange-600 mt-4">
                        <i class="fas fa-exclamation-triangle mr-1"></i>
                        请立即保存此密码并通知用户，此窗口关闭后将无法再次查看
                    </p>
                </div>
                <div class="flex justify-end">
                    <button onclick="hideNewPasswordModal()" class="bg-gradient-to-r from-indigo-500 to-purple-600 text-white px-6 py-2 rounded-lg hover:shadow-lg transition-all duration-300">
                        我知道了
                    </button>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block extra_js %}
<script src="/static/js/account-management.js?v=20240913-2"></script>
{% endblock %}